<template>
	<view class="page">
    <u-navbar :fixed="false" title="销售订单列表" :autoBack="true" bgColor="transparent"></u-navbar>
    <view class="content">
      <view class="search">
        <view class="search-type" @click="pickerType = 'type'">{{ form.typeName }}
          <u-icon name="arrow-down" size="24rpx"></u-icon>
        </view>
        <u-search
          placeholder="请输入"
          v-model="searchValue"
          @search="search"
          :showAction="false"
        ></u-search>
      </view>
      <view class="condition-center">
        <view class="condition-item" @click="showDatetime = true">
          <text class="u-line-1">{{ form.FDate || '业务日期'}}</text><u-icon color="#000" size="24rpx" name="arrow-down"></u-icon>
        </view>
        <view class="condition-item" @click="pickerType='status'">
          <text class="u-line-1">{{ form.statusName || '单据状态'}}</text><u-icon color="#000" size="24rpx" name="arrow-down"></u-icon>
        </view>
        <view class="condition-item" @click="pickerType='FBillType'">
          <text class="u-line-1">{{ form.FBillTypeName || '单据类型'}}</text><u-icon color="#000" size="24rpx" name="arrow-down"></u-icon>
        </view>
      </view>
      <view class="list">
        <u-list>
          <u-list-item>
            <view class="list-item" v-for="(item, index) in list" :key="index" @click="jumpTo('/other/salesOrder/saleOrderDetail', {fid: item[5]})">
              <view class="u-flex u-m-b-18">
                <view class="u-flex-1 h5 u-m-b-0">{{ item[0] }}</view>
                <view style="color: #FF8819;">{{ statusInfo[item[4]] }}</view>
              </view>
              <view class="u-flex form-info">
                <view class="u-flex-1 form-content">{{ item[1] }}</view>
                <view class="price">¥<text>{{ item[2] }}</text></view>
              </view>
              <view class="u-flex">
                <view class="u-flex-1 form-info">
                </view>
                <view class="form-info">
                  <view class="form-content">{{ item[3].substring(0, 10) }}</view>
                </view>
              </view>
            </view>
          </u-list-item>
        </u-list>
        <!-- <u-empty></u-empty> -->
      </view>
      <view class="footer">
        <view @click="jumpTo('/other/salesOrder/salesOrder')" class="btn" :class="{pB30: isFullSucreen}">生单</view>
      </view>
    </view>
    <u-picker
      :show="pickerType!=''"
      :columns="[pickerInfo[pickerType]]"
      keyName="name"
      @confirm="pickerConfirm"
      @cancel="pickerType = ''"
    ></u-picker>
    <u-datetime-picker v-model="datetime" mode="date" :show="showDatetime" @confirm="datetimeConfirm" cancelText="清除" @cancel="datetimeCancel"></u-datetime-picker>
	</view>
</template>

<script>
import { getMaterialInformation } from '../../api/index'
import { formatTimeTwo } from '../../common/util'

export default {
  data() {
    return {
      datetime: new Date().getTime(),
      statusInfo: {
        'A': '创建',
        'B': '审核中（提交）',
        'C': '已审核',
        'D': '重新审核',
        'Z': '暂存',
      },
      isFullSucreen: this.isFullSucreen,
      searchValue: '',
      pickerType: '',
      pickerInfo: {
         type: [
          {
            id: 'FCustId.FNumber',
            name: '客户编码'
          },
          {
            id: 'FCustId.FName',
            name: '客户名称',
          },
          {
            id: 'FBillNo',
            name: '单据编号'
          },
        ],
        status: [
          {
            id: '',
            name: '全部'
          },
          {
            id: 'A',
            name: '创建'
          },
          {
            id: 'B',
            name: '审核中（提交）'
          },
          {
            id: 'C',
            name: '已审核'
          },
          {
            id: 'D',
            name: '重新审核'
          },
          {
            id: 'Z',
            name: '暂存'
          },
        ],
        FBillType: [
          {
            id: '',
            name: '全部'
          },
          { name: '下单', id: 'XSDD01_SYS' },
          { name: '退货', id: 'XSDD05_SYS' }
        ],
      },
      showDatetime: false,
      form: {
        typeName: '客户编码',
        type: 'FCustId.FNumber',
      },
      isMore: true,
      StartRow: 0,
      Limit: 500,
      list: [],
			userInfo: {},
    }
  },
  onLoad() {
		this.userInfo = uni.getStorageSync('userInfo')
  },
	onShow() {
		this.list = []
		this.getPage()
	},
  methods: {
    getPage(f = false) {
      const parameters = [
        {
          "FormId": "SAL_SaleOrder",
          "FieldKeys": "FBillNo,FCustId.FName,FBillAmount,FDate,FDocumentStatus,fid",
          // "FieldKeys": "FBillNo,FDocumentStatus,FBillAmount,FSaleOrgId.fname,FDate,FCustId.fname",
					"FilterString": "FCreatorId = '"+ this.userInfo.UserId +"'",
          "OrderString": "fdate desc",
          "TopRowCount": 0,
          "StartRow": this.Limit * this.StartRow,
          "Limit": this.Limit,
          "SubSystemId": ""
        }
      ]
      if(this.form.status) {
        parameters[0].FilterString = parameters[0].FilterString + "and FDocumentStatus='"+ this.form.status +"'"
      }
      if(this.form.FBillType) {
        parameters[0].FilterString = parameters[0].FilterString + "and FBillTypeID.FNumber='"+ this.form.FBillType +"'"
      }
      if(this.form.FDate) {
        parameters[0].FilterString = parameters[0].FilterString + "and FDate = '"+ this.form.FDate +"'"
      }
      if(this.searchValue) {
        parameters[0].FilterString = parameters[0].FilterString +  "and " + this.form.type + " like '%"+ this.searchValue +"%'"
      }
      uni.showLoading({ mask:true })
      getMaterialInformation({parameters}).then(res => {
        uni.hideLoading()
        if(res.length < this.Limit) {
          this.isMore = false
        }
        if(f) {
          this.list = []
        }
        this.list = [...this.list, ...res]
      })
    },
    search() {
      this.StartRow = 0
      this.getPage(true)
    },
    pickerConfirm(e) {
      if(e.value[0].id) {
        this.form[this.pickerType] = e.value[0].id
        this.form[this.pickerType+'Name'] = e.value[0].name
      } else {
        this.form[this.pickerType] = ''
        this.form[this.pickerType+'Name'] = ''
      }
      if(this.pickerType == 'status' || this.pickerType == 'FBillType') {
        this.getPage(true)
      }
      this.pickerType = ''
    },
    datetimeConfirm(e) {
      this.form.FDate = formatTimeTwo(e.value, 'Y-M-D')
      this.showDatetime = false
      this.getPage(true)
    },
    datetimeCancel() {
      this.form.FDate = ''
      this.datetime = new Date().getTime()
      this.showDatetime = false
      this.getPage(true)
    },
  },
  onReachBottom() {
    if(this.isMore) {
      this.StartRow++
      this.getPage()
    }
  }
}
</script>

<style lang="scss" scoped>
.page{
	width: 750rpx;
	min-height: 100vh;
  padding-bottom: 348rpx;
  .content {
    width: 100%;
    padding: 0 30rpx;
  }
  .search {
    margin-top: 20rpx;
    padding: 16rpx 20rpx;
    background: #FFF;
    border-radius: 20rpx;
    box-shadow: 3rpx 3rpx 4rpx rgba(0, 0, 0, 0.16);
    display: flex;
    align-items: center;
    .search-type {
      width: 180rpx;
      margin-right: 10rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      gap: 6rpx;
    }
  }
  .condition-center {
    width: 690rpx;
    padding: 16rpx 20rpx;
    background: #FFF;
    border-radius: 20rpx;
    box-shadow: 3rpx 3rpx 4rpx rgba(0, 0, 0, 0.16);
    margin: 20rpx auto 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .condition-item {
      flex: 1;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12rpx;
      color: #000;
      font-size: 28rpx;
    }
  }
  .list {
    margin-bottom: 20rpx;
    background: #FFF;
    border-radius: 20rpx;
    box-shadow: 3rpx 3rpx 4rpx rgba(0, 0, 0, 0.16);
    .list-item {
      padding: 20rpx 30rpx;
      border-bottom: 2rpx solid rgb(214, 215, 217);
      .price {
        color: red;
        font-size: 28rpx;
        font-weight: 500;
        text {
          font-size: 36rpx;
        }
      }
    }
  }
  .footer {
    width: 100%;
    // background: #2979ff;
    position: fixed;
    left: 0;
    bottom: 0;
    .total-info {
      background: #fdf6ec;
      padding: 20rpx 30rpx;
      color: #000;
      font-family: "PingFang SC";
      font-size: 36rpx;
    }
    .btn {
      width: 100%;
      // height: 90rpx;
      line-height: 90rpx;
      text-align: center;
      background: #2979ff;
      color: #FFF;
      font-family: "PingFang SC";
      font-size: 36rpx;
    }
  }
}
</style>
